<template>

  <el-drawer v-model="descriptionDrawer"
             :append-to-body="true"
             :close-on-click-modal="!is_edit"
             :before-close="descriptionDrawerStore.cancelDescriptionFrom"
             direction="rtl" :size="1000">
    <template #header>
      <div class="description-drawer-header">
        <span>{{ Drawer_title }}</span>
      </div>
      <span></span>
    </template>
    <template #default>
      <div :class="is_edit?'edit_description':'view_description'">
        <el-form v-if="is_edit" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="描述标题">
                <el-input v-model.trim="title" placeholder="请输入描述标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="唯一标识">
                <el-input v-model.trim="keywords" :disabled="!is_create" placeholder="请输入唯一标识"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--        subfield:是否分屏展示，editable:是否可编辑-->
        <mavon-editor
            ref="mavonEditorRef"
            @imgAdd="imgAdd"
            :boxShadow="false"
            placeholder="请输入说明文档"
            :subfield="is_edit"
            :editable="is_edit"
            defaultOpen="preview"
            codeStyle="tomorrow-night"
            v-model="mavonValue"
            :toolbars="is_edit?edit_toolbars:view_toolbars">
          <template slot="left-toolbar-after">
            <el-button></el-button>
          </template>
        </mavon-editor>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button v-show="is_edit" type="info" @click="descriptionDrawerStore.cancelDescriptionFrom">关闭</el-button>
        <el-button v-show="is_edit" type="primary" @click="descriptionDrawerStore.commitDescriptionFrom">保存
        </el-button>
        <el-button v-show="!is_edit" @click="descriptionDrawerStore.cancelDescriptionFrom">关闭</el-button>
        <el-button v-show="!is_edit" type="primary" @click="descriptionDrawerStore.editeDescription">编辑</el-button>
      </div>
    </template>
  </el-drawer>

</template>

<script setup>

import {useDescriptionDrawerStore} from "@/stores/modules/system/descriptionDrawer.js";
import {nextTick, onMounted, ref} from "vue";
import {storeToRefs} from "pinia";
import {postDescriptionFileApi} from "@/api/modules/system/description.js";

const descriptionDrawerStore = useDescriptionDrawerStore()

const {
  descriptionDrawer,
  title,
  keywords,
  mavonValue,
  Drawer_title,
  is_edit,
  is_create
} = storeToRefs(descriptionDrawerStore)

// 切换到编辑时，工具栏显示
const edit_toolbars = ref({
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下划线
  strikethrough: true, // 中划线
  mark: true, // 标记
  superscript: true, // 上角标
  subscript: true, // 下角标
  quote: true, // 引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: true, // 链接
  imagelink: true, // 图片链接
  code: true, // code
  table: true, // 表格
  // fullscreen: true, // 全屏编辑
  // readmodel: true, // 沉浸式阅读
  // htmlcode: true, // 展示html源码
  // help: true, // 帮助
  /* 1.3.5 */
  undo: true, // 上一步
  redo: true, // 下一步
  trash: true, // 清空
  // save: true, // 保存（触发events中的save事件）
  /* 1.4.2 */
  navigation: true, // 导航目录
  /* 2.1.8 */
  alignleft: true, // 左对齐
  aligncenter: true, // 居中
  alignright: true, // 右对齐
  /* 2.2.1 */
  // subfield: true, // 单双栏模式
  preview: true, // 预览
})

// 切换到预览时，工具栏显示
const view_toolbars = ref({
  navigation: true, // 导航目录
})

const baseURL = import.meta.env.VITE_API_URL

const mavonEditorRef = ref()

const imgAdd = (pos, file) => {
  // 根据后台需求数据格式
  const form = new FormData();
  // 文件对象
  form.append("file", file);
  // 上传头像的请求方法
  postDescriptionFileApi(form).then(res => {
    console.log(pos)
    console.log(res)
    mavonEditorRef.value.$img2Url(pos, baseURL + res.data)
  })
}
// $img2Url(fileIndex, url): 用于将图片插入到编辑器中，替换指定位置的图片。参数 fileIndex 是图片的索引，url 是图片的地址。
// $imgAdd(e, t, r): 用于处理图片的添加操作。参数 e 包含了图片的相关信息，t 是图片的文件对象，r 是其他可能需要的信息。
// $imgDel(e): 用于删除编辑器中指定位置的图片。参数 e 是图片的位置信息。
// $imgAddByUrl(e, t): 通过图片的 URL 添加图片到编辑器中。参数 e 是图片的位置信息，t 是图片的 URL。


// 更改背景色
// 工具栏背景色
const toolbarsBackground = ref("#ffffff")
// 编辑栏背景色
const editorBackground = ref("#ffffff")
// 预览栏背景色
const previewBackground = ref("#ffffff")


</script>

<style lang="scss">
@import "index.scss";

</style>
